<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学车在线首页</title>
    <link rel="stylesheet" href="./css/style.css" />
    <style></style>
  </head>

  <body>
    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
      <div class="box-hd">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
      </div>
      <div class="box-bd">
        <ul class="clearfix"></ul>
      </div>
    </div>

    <script>
      // 1. 重构
      let data = [
        {
          src: "images/course01.png",
          title: "Think PHP 5.0 博客系统实战项目演练",
          num: 1125,
        },
        {
          src: "images/course02.png",
          title: "Android 网络动态图片加载实战",
          num: 357,
        },
        {
          src: "images/course03.png",
          title: "Angular2 大前端商城实战项目演练",
          num: 22250,
        },
        {
          src: "images/course04.png",
          title: "Android APP 实战项目演练",
          num: 389,
        },
        {
          src: "images/course05.png",
          title: "UGUI 源码深度分析案例",
          num: 124,
        },
        {
          src: "images/course06.png",
          title: "Kami2首页界面切换效果实战演练",
          num: 432,
        },
        {
          src: "images/course07.png",
          title: "UNITY 从入门到精通实战案例",
          num: 888,
        },
        {
          src: "images/course08.png",
          title: "Cocos 深度学习你不会错过的实战",
          num: 590,
        },
      ];

      const ul = document.querySelector(".box-bd ul");

      // 根据数据的个数 创建对应的小li
      // 2. 遍历
      for (let i = 0; i < data.length; i++) {
        // 创建小li
        const li = document.createElement("li");
        li.innerHTML = `
            <a href="#">
                <img src=${data[i].src} alt="" />
                <h4>
                    ${data[i].title}
                </h4>
                <div class="info">
                    <span>高级</span> • <span>${data[i].num}</span>人在学习
                </div>
            </a>
        `;
        // 追加小li
        ul.appendChild(li);
      }
    </script>
  </body>
</html>
